<template>
  <div class="service">
      <div class="topImg">
        <img src="@/assets/image/employment/doctor.png" alt="" />
      </div>
      <div class="serviceContent">
        <!-- 康复科普 -->
        <div class="mallactivity">
            <div class="navTitle">
                <p class="titleName">康复科普</p>
                <p class="titleenglish">REHABILITATION SCIENCE POPULARIZATION</p>
            </div>
            <div class="mall">
                <p>更多</p>
                <img src="@/assets/image/employment/mall.png" alt="" />
            </div>
        </div>
        <!-- 科普列表 -->
        <ul class="servicesList">
            <li>
                <p class="title">偏瘫患者和家属对康复行为的八大认知误区</p>
                <p class="time">2021/04/27</p>
            </li>
            <li>
                <p class="title">偏瘫患者和家属对康复行为的八大认知误区</p>
                <p class="time">2021/04/27</p>
            </li>
            <li>
                <p class="title">偏瘫患者和家属对康复行为的八大认知误区</p>
                <p class="time">2021/04/27</p>
            </li>
            <li>
                <p class="title">偏瘫患者和家属对康复行为的八大认知误区</p>
                <p class="time">2021/04/27</p>
            </li>
            <li>
                <p class="title">偏瘫患者和家属对康复行为的八大认知误区</p>
                <p class="time">2021/04/27</p>
            </li>
            <li>
                <p class="title">偏瘫患者和家属对康复行为的八大认知误区</p>
                <p class="time">2021/04/27</p>
            </li>
        </ul>
        <!-- 机构查询 -->
        <div class="mallactivity">
            <div class="navTitle">
                <p class="titleName">机构查询</p>
                <p class="titleenglish">Institutional inquiry</p>
            </div>
        </div>
        <div class="institutional">
            <div class="find">
                <a-input placeholder="Basic usage" />
            </div>
        </div>
        <!-- 知识问答 -->
        <div class="mallactivity">
            <div class="navTitle">
                <p class="titleName">知识问答</p>
                <p class="titleenglish">KNOWLEDGE</p>
            </div>
        </div>
        <ul class="knowledges">
            <li>
                <div class="title">
                    <p class="identification">·</p>
                    <p class="innertext">一级智力残疾人与公司签订劳动合同后，在不理解签署的文件性质的情况下签署了离职申请，可以获得经济补偿金吗？</p>
                </div>
                <div class="knowcontent">
                    <p class="innercontent" :class="flag?'':'contentactive'">
                        法院认为，因一级智力残疾人不具备对签订劳动合同、签署离职申请等涉及个人重大利益的行为的判断能力和理解能力，且不能预见其行为后果，重大民事行为应由其法定代理人代理或者征得法定代理人的同意。一级智残人士签署离职申请的行为不予认可，签署离职申请的行为应属无效，双方的劳动合同应继续履行至合同期限终止。公司应当依照劳动合同法对当事人支付终止劳动合同经济补偿金。照劳动合同法对当事人支付终止劳动合同经济补偿金。照劳动合同法对当事人支付终止劳动合同经济法院认为，因一级智力残疾人不具备对签订劳动合同、签署离职申请等涉及个人重大利益的行为的判断能力和理解能力，且不能预见其行为后果，重大民事行为应由其法定代理人代理或者征得法定代理人的同意。一级智残人士签署离职申请的行为不予认可，签署离职申请的行为应属无效，双方的劳动合同应继续履行至合同期限终止。公司应当依照劳动合同法对当事人支付终止劳动合同经济补偿金。照劳动合同法对当事人支付终止劳动合同经济补偿金。照劳动合同法对当事人支付终止劳动合同经济法院认为，因一级智力残疾人不具备对签订劳动合同、签署离职申请等涉及个人重大利益的行为的判断能力和理解能力，且不能预见其行为后果，重大民事行为应由其法定代理人代理或者征得法定代理人的同意。一级智残人士签署离职申请的行为不予认可，签署离职申请的行为应属无效，双方的劳动合同应继续履行至合同期限终止。公司应当依照劳动合同法对当事人支付终止劳动合同经济补偿金。照劳动合同法对当事人支付终止劳动合同经济补偿金。照劳动合同法对当事人支付终止劳动合同经济照劳动合同法对当事
                    </p>
                    <div class="show" v-show="flag" @click="show">
                        <p>阅读全文</p>
                        <img src="@/assets/image/employment/bottom.png" alt="">
                    </div>
                    <div class="show" v-show="!flag" @click="show">
                        <p>收起</p>
                        <img src="@/assets/image/employment/top.png" alt="">
                    </div>
                </div>
            </li>
            <li>
                <div class="title">
                    <p class="identification">·</p>
                    <p class="innertext">一级智力残疾人与公司签订劳动合同后，在不理解签署的文件性质的情况下签署了离职申请，可以获得经济补偿金吗？</p>
                </div>
                <div class="knowcontent">
                    <p class="innercontent" :class="flag?'':'contentactive'">
                        法院认为，因一级智力残疾人不具备对签订劳动合同、签署离职申请等涉及个人重大利益的行为的判断能力和理解能力，且不能预见其行为后果，重大民事行为应由其法定代理人代理或者征得法定代理人的同意。一级智残人士签署离职申请的行为不予认可，签署离职申请的行为应属无效，双方的劳动合同应继续履行至合同期限终止。公司应当依照劳动合同法对当事人支付终止劳动合同经济补偿金。照劳动合同法对当事人支付终止劳动合同经济补偿金。照劳动合同法对当事人支付终止劳动合同经济法院认为，因一级智力残疾人不具备对签订劳动合同、签署离职申请等涉及个人重大利益的行为的判断能力和理解能力，且不能预见其行为后果，重大民事行为应由其法定代理人代理或者征得法定代理人的同意。一级智残人士签署离职申请的行为不予认可，签署离职申请的行为应属无效，双方的劳动合同应继续履行至合同期限终止。公司应当依照劳动合同法对当事人支付终止劳动合同经济补偿金。照劳动合同法对当事人支付终止劳动合同经济补偿金。照劳动合同法对当事人支付终止劳动合同经济法院认为，因一级智力残疾人不具备对签订劳动合同、签署离职申请等涉及个人重大利益的行为的判断能力和理解能力，且不能预见其行为后果，重大民事行为应由其法定代理人代理或者征得法定代理人的同意。一级智残人士签署离职申请的行为不予认可，签署离职申请的行为应属无效，双方的劳动合同应继续履行至合同期限终止。公司应当依照劳动合同法对当事人支付终止劳动合同经济补偿金。照劳动合同法对当事人支付终止劳动合同经济补偿金。照劳动合同法对当事人支付终止劳动合同经济照劳动合同法对当事
                    </p>
                    <div class="show" v-show="flag" @click="show">
                        <p>阅读全文</p>
                        <img src="@/assets/image/employment/bottom.png" alt="">
                    </div>
                    <div class="show" v-show="!flag" @click="show">
                        <p>收起</p>
                        <img src="@/assets/image/employment/top.png" alt="">
                    </div>
                </div>
            </li>
        </ul>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            flag: true
        }
    },
    mounted(){
        this.getSpreadList();
    },
    methods:{
        getSpreadList(){
            this.$ajax({
                url:"/news/healthspread/list",
                method:"post"
            })
        },
        show(){
            this.flag = !this.flag;
        }
    }
}
</script>

<style scoped lang="less">
    .service{
        background-image: url('~@/assets/image/employment/backimg.png');
        background-size:100% auto;
        min-height: calc(100vh - 284px);
        .topImg {
            width: 100%;
            img {
            width: 100%;
            }
        }
        .serviceContent{
            width: 1200px;
            margin: 0 auto;
            padding: 50px 0;
            .mallactivity {
                display: flex;
                justify-content: space-between;
                .navTitle{
                    width: 400px !important;
                }
                .mall {
                    display: flex;
                    align-items: center;
                    color: #fb6d00;
                    p {
                        margin-right: 5px;
                        font-size: 12px;
                    }
                    img {
                        width: 10px;
                    }
                }
            }
            .servicesList{
                display: flex;
                flex-wrap: wrap;
                margin-top: 30px;
                margin-bottom: 70px;
                li{
                    width: 386.67px;
                    height: 98px;
                    padding: 24px;
                    background-color: #ffffff;
                    margin-right: 20px;
                    margin-bottom: 20px;
                    .title{
                        color: #333333;
                        font-size: 16px;
                        font-weight: bold;
                        line-height: 16px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    .time{
                        color: #666666;
                        font-size: 14px;
                        line-height: 14px;
                        margin-top: 20px;
                    }
                }
                li:nth-child(3n){
                    margin-right: 0;
                }
            }
            .institutional{
                
            }
            .knowledges{
                margin-top: 30px;
                li{
                    padding: 24px 40px 32px;
                    background-color: #ffffff;
                    margin-bottom: 16px;
                    .title{
                        display: flex;
                        .identification{
                            font-size: 53px;
                            line-height: 20px;
                            color: #FB6D00;
                        }
                        .innertext{
                            color: #333333;
                            font-size: 18px;
                            line-height: 25px;
                            margin-left: 10px;
                            font-weight: bold;
                        }
                    }
                    .knowcontent{
                        position: relative;
                        margin-top: 22px;
                        .innercontent{
                            color: #333333;
                            font-size: 15px;
                            line-height: 28px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display:-webkit-box;
                            -webkit-line-clamp: 3;/*行数*/
                            -webkit-box-orient: vertical;
                        }
                        .contentactive{
                            -webkit-line-clamp: 10000;
                        }
                        .show{
                            position: absolute;
                            right: 0;
                            // bottom: 5px;
                            display: flex;
                            cursor: pointer;
                            p{
                                color: #0D4FAE;
                                font-size: 15px;
                                line-height: 21px;
                            }
                            img{
                                width: 20px;
                                margin-left: 4px;
                            }
                            
                        }
                    }
                }
            }
        }
    }
</style>